<template>
  <div>
    <section v-for="block in shelves" :key="block.title">
      <h3 class="hui-iapp-title">{{ block.title }}</h3>
      <el-row type="flex" :gutter="20" class="hui-flex--warp">
        <el-col :span="8" v-for="item in block.app" :key="item.name">
          <div @click="goDetail(item.appid)">
            <el-card shadow="hover" class="hui-iapp-card" :body-style="{ padding: '0px' }">
              <h-image :src="item.src" mode="background-image" width="100%" height="15vw"></h-image>
              <div class="hui-p-1 hui-text-center" style="height: 116px;">
                <h2 class="hui-font-weight-bold">{{ item.name }}</h2>
                <div class="hui-color-text-secondary" v-html="item.desc"></div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      shelves: [
        {
          title: '服务工具',
          app: [
            {
              src: this.$random.randomEnum(this.$store.state.image),
              name: 'i点餐(茶饮连锁版)',
              desc: '顾客:&nbsp;自助手机点单，方便快捷<br>门店:&nbsp;自动接单打印，省时省人',
              appid: 'iorder'
            },
            {
              src: this.$random.randomEnum(this.$store.state.image),
              name: 'i外卖(连锁版)',
              desc: '自定义配送区域，支持第三方配送<br>拥有自己的外卖平台',
              appid: ''
            },
            {
              src: this.$random.randomEnum(this.$store.state.image),
              name: 'i拼团',
              desc: '忠实客户邀请朋友一起买买买<br>老客得实惠，新客新体验',
              appid: ''
            }
          ]
        }
      ]
    }
  },
  created () {},
  methods: {
    goDetail (appid) {
      console.log(appid.length)
      if (appid.length === 0) {
        this.$message.info('该应用暂未开放，敬请期待！')
      } else {
        this.$router.push({
          path: 'detail',
          query: {
            appid: appid
          }
        })
      }
    }
  }
}
</script>

<style lang="less">
@import "../../../../../common/h-theme/_variable.less";

.hui-iapp-title {
  border-left: 4px solid @--color-primary-light-7;
  padding-left: 12px;
  color: @--color-text-regular;
}

.hui-iapp-card {
  position: relative;
  bottom: 0;
  margin-bottom: 20px;
  cursor: pointer;
  user-select: none;

  &::before {
    .setActive();
  }

  &:hover {
    bottom: 5px;
  }

  &:active {
    &::before {
      opacity: .08;
    }
  }
}
</style>
